<template>
  <div class="address">
      <mt-header title="新建地址" fixed>
        <router-link to="/showAddress" slot="left">
          <mt-button icon="back"></mt-button>
          <!-- <mt-button @click="handleClose">关闭</mt-button> -->
        </router-link>
      </mt-header>
    <section style="margin-top: 42px;" class="con">
      <label><span>收货人：</span><input v-model="username" type="text" name="" value="" placeholder="请输入收货人的姓名"></label>
      <label><span>手机号:</span><input v-model="tel" type="number" name="" value="" placeholder="请输入收货联系电话"></label>
      <label><span>地&nbsp;&nbsp;&nbsp;址:</span>
        <select v-model="selectedProvince" name="province" @change="province(selectedProvince)">
          <option v-for="(item, index) in provinces" :value="item.regionid" :selected="index==1">
            {{ item.name }}
          </option>
        </select>
        <select v-model="selectedCity" name="city" @change="shi(selectedCity)">
          <option v-for="(item, index) in cities" :value="item.regionid">
            {{ item.name }}
          </option>
        </select>
        <select v-model="selectedBlock" name="block" @change="xian(selectedBlock)">
          <option v-for="(item, index) in blocks" :value="item.regionid">
            {{ item.name }}
          </option>
        </select>
      </label>
      <label><span>门牌号：</span><input v-model="address" type="text" name="" value="" placeholder="请输入收货详细地址"></label>
      <p class="moren flex_style"><span>设为默认</span><mt-switch height="26px" v-model="moren" @change="turn"></mt-switch></p>
    </section>
    <p class="finish" @click="finish()">完成</p>
  </div>
</template>

<script>
import axios from '../../axios/axios'
import BScroll from 'better-scroll';
export default {
  name: 'address',
  data () {
    return {
      selectedProvince:'选择省',
      provinces:[],
      selectedCity:'选择市',
      cities:[],
      selectedBlock:'选择区',
      blocks:[],
      addressCode:'',
      moren:true,
      username:'',
      tel:'',
      address:'',
    }
  },
  components: {

  },
  mounted: function(){
    var that =this;
    var data=JSON.stringify({
            "data": [{
                "parentid": "0"
              }],
              "controllerName": "regions",
              "actionName": "query"
        });
  axios.postAdmain({
      data: data,
      callback(res) {
        // console.log(res.data.data);
        that.provinces=res.data.data;
      }
    });
  var a = document.getElementById("mySelect");
  },
  methods:{
     province:function(id){
      var that = this;
      console.log(id)
        var data=JSON.stringify({
            "data": [{
                "parentid": id
              }],
              "controllerName": "regions",
              "actionName": "query"
        });
        axios.postAdmain({
            data: data,
            callback(res) {
              // console.log(res.data.data);
              that.cities=res.data.data;
              // console.log(that.cities)
            }
          });
     },
     shi:function(id){
      var that = this;
      console.log(id)
        var data=JSON.stringify({
            "data": [{
                "parentid": id
              }],
              "controllerName": "regions",
              "actionName": "query"
        });
        axios.postAdmain({
            data: data,
            callback(res) {
              // console.log(res.data.data);
              that.blocks=res.data.data;
              console.log(that.blocks)
            }
          });
     },
     xian:function(id){
      var that = this;
      that.addressCode=id;
     },
     turn:function(){
        console.log(this.moren)
     },
     finish:function(){
      var that = this;
      var data=JSON.stringify({
            "actionName": "insert",
            "controllerName": "userHarvestAddress",
            "data": [{
              "address": that.address,
              "areaCode": that.addressCode,
              "isDefault": that.moren,
              "mobile": that.tel,
              "userName": that.username,
            },
            1,
            10]
        });
        axios.post({
            data: data,
            callback(res) {
              console.log(res);
              if(res.data.data.result){
                  that.$router.push('/showAddress');
              }else{
                alert(res.data.data.remark)
              } 
            }
          });
     }
  },
  computed:{
    // totalPrice:function(){
    //   var total = 0;
    //   this.list.forEach(function(good){
    //     if(good.isChecked){
    //       total += good.productInfo.price * good.count;
    //     }
    //   });
    //   return total;
    // },
  },
}
</script>
<style type="text/scss" lang="scss" scoped>
@import "../../common/style/public";
.address{
  .con{
    label{
      display: block; padding: 0 4vw;width: 92vw;background-color: #fff;margin-top: 1px;
      span{
        display: inline-block;width: 20vw;
      }
      input{
        height: 36px;
      }
      select{
        width: 22vw;height:36px;border:none;outline: none;
      }
    }
    .moren{
      background-color: #fff;border-top: 1px solid #f5f5f5;height: 36px;line-height: 36px;padding-top: 2px;
      span{
        display:block;background-color: #fff;padding-left: 4vw;
      }
      label{
        width: 18vw;
        span{height: 26px;}
      }
    }
  }
  .finish{
    width: 80vw;margin-left: 10vw;height:36px;background-color: #26a2ff;margin-top:16vh;text-align: center;line-height: 36px;color: #fff;font-size: 18px;border-radius: 8px;
  }
}
</style>







